<template>
	<!-- 双色球、大乐透投注 -->
	<view>
		<view class="header flex">
			<view class="status-bar"></view>
			<view class="title flex-c">
				<view class="flex" @click="fnGoBack()">
					<uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
				</view>
				<view class="flex-c doubleColor">
					<text class="pageTitle">{{pageTitle}}</text>
					<text class="smallTitle">{{smallTitle}}</text>
					<!-- <uni-icons type="arrowdown" size="14" color="#fff"></uni-icons> -->
				</view>
				<view class="share flex">
					<!-- <text class="select">筛选</text> -->
					<image src="../../static/index/class.png"></image>
					<!-- <uni-icons type="list" size="24" color="#fff"></uni-icons> -->
				</view>
			</view>
		</view>
		<view class="holder">

		</view>
		<view class="listBox">
			<!-- 大乐透 -->
			<view class="list" v-if="type">
				<view class="item flex-bc" v-for="(item,index) in cartList" :key="index">
					<view class="info flex">
						<image src="../../static/index/close1.png" mode="aspectFill" @click="fnDeleteSingle(index)"></image>
						<view class="content" @click="fnBackSee(item,index)">
							<view class="numbers flex">
								<view class="red flex">
									<view class="flex-c" v-for="(redItem,redIndex) in item.blue_ball" :key="redIndex">				
									    <text style="color: #5CA1FC;" v-if="redItem.status == 2">[胆{{redItem.num}}]</text>
										<text style="color: #5CA1FC;" v-else>{{redItem.num}}</text>
									</view>
								</view>
								<view class="blue flex">
									<view class="flex-c" v-for="(blueItem,blueIndex) in item.yellow_ball" :key="blueIndex">
										<text style="color: #FFA40F;" v-if="blueItem.status == 2">[胆{{blueItem.num}}]</text>
										<text style="color: #FFA40F;" v-else>{{blueItem.num}}</text>
									</view>
								</view>
							</view>
							<view class="desc">
								<text v-if="item.blue_ball.length + item.yellow_ball.length > 7">复式</text><text v-else>单式</text><text>{{item.num}}注</text><text>{{item.perPrice*item.num}}元</text>
							</view>
						</view>
					</view>
					<uni-icons type="arrowright" size="16" color="#e3e3e3"></uni-icons>
				</view>
			</view>
			
			<!-- 双色球 -->
			<view class="list" v-else>
				<view class="item flex-bc" v-for="(item,index) in cartList" :key="index">
					<view class="info flex">
						<image src="../../static/index/close1.png" mode="aspectFill" @click="fnDeleteSingle(index)"></image>
						<view class="content" @click="fnBackSee(item,index)">
							<view class="numbers flex">
								<view class="red flex">
									<view class="flex-c" v-for="(redItem,redIndex) in item.red_ball" :key="redIndex">
										<text v-if="redItem.status == 2">[胆{{redItem.num}}]</text>
										<text v-else>{{redItem.num}}</text>
									</view>
								</view>
								<view class="blue flex">
									<view class="flex-c" v-for="(blueItem,blueIndex) in item.blue_ball" :key="blueIndex">
										<text>{{blueItem}}</text>
									</view>
								</view>
							</view>
							<view class="desc">
								<text v-if="item.red_ball.length + item.blue_ball.length > 7">复式</text><text v-else>单式</text><text>{{item.num}}注</text><text>{{item.perPrice*item.num}}元</text>
							</view>
						</view>
					</view>
					<uni-icons type="arrowright" size="16" color="#e3e3e3"></uni-icons>
				</view>
			</view>
			<view class="btns flex-bc">
				<view class="clearAll btn flex-c" @click="fnClearCart()">
					<text>×清除全部</text>
				</view>
				<view class="continue btn flex-c" @click="fnRechoose()">
					<text>+重新选号</text>
				</view>
			</view>

		</view>
		<view class="upload flex-c" @click="fnIsUploadImg()">
			<image src="../../static/bets/choose.png" mode="" v-if="isUploadImg"></image>
			<image src="../../static/bets/not-choose.png" mode="" v-else></image>
			<text>要求店主上传出票照片</text>
		</view>
		<view class="other">
			<view class="multi flex-bc">
				<text>购买几倍？</text>
				<view class="flex-c">
					<text @click="fnChangeMultiple(0)">-</text>
					<input type="number" v-model="number" @blur="handleInput()">
					<text @click="fnChangeMultiple(1)">+</text>
				</view>
			</view>
			<view class="add flex-bc" v-if="type">
				<text>是否追加？</text>
				<view class="flex-c">
					<switch checked @change="switch1Change" style="transform:scale(0.7)" color="#F22F29" />

				</view>
			</view>
			<view class="addStage flex-bc">
				<text>是否追期？</text>
				<view class="flex-c">
					<view class="flex-c warmming">
						<text>追期更易中大奖</text>
					</view>
					<view class="arrow">

					</view>
					<switch @change="switch2Change" style="transform:scale(0.7)" color="#F22F29" />
				</view>
			</view>
		</view>
		<view class="holder1">

		</view>
		<view class="foot flex-bc">
			<view class="oper left flex">
				<view class="flex-c warmming">
					<view class="betsNum flex">
						<text style="color: #ED555E;font-size: 36rpx;">￥{{betsNum*2*number}}</text>
						<text>{{betsNum}}注{{number}}倍</text>
					</view>
				</view>
			</view>
			<view class="oper right flex-c">
				<view class="addNum flex-c" @click="fnAddCart()">
					<text>合买</text>
				</view>
				<view class="finish flex-c" @click="fnSingleBuy()">
					<text>单买</text>
				</view>
			</view>
		</view>

		<uni-popup ref="popupPayment" type="bottom">
			<view class="payBox">
				<view class="payHead">
					<view class="payTitle flex-c">
						<uni-icons type="closeempty" size="24" color="#666" class="icon" @click="close"></uni-icons>
						<text>支付</text>
					</view>
					<view class="payType flex-bc">
						<text>{{bet_name}}:</text>
						<text class="red">{{betsNum*2*number}}元</text>
					</view>
				</view>
				<view class="payMain">
					<view class="redbag flex-bc">
						<text>红包抵扣:</text>
						<text class="gray">暂无红包</text>
					</view>
					<view class="balance flex-bc">
						<text>余额抵扣:</text>
						<text class="red">{{betsNum*2*number}}元</text>
					</view>
					<view class="confirm">
						<view class="comPayBtn flex-c" @click="fnCreateDoubleColorOrder()">
							<text>确认支付</text>
						</view>
						<view class="flex-c agreement">
							<image src="../../static/bets/choose.png" v-if="isAgreement" @click="isAgreement = !isAgreement"></image>
							<image src="../../static/bets/not-choose.png" v-else @click="isAgreement = !isAgreement"></image>
							<text class="red">我已年满18岁，</text>已阅读并同意<text class="red" @click="fnToStatement()">《用户协议及法律声明》</text>
						</view>
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isUploadImg: true,
				number: 1,
				cartList: [],
				token: uni.getStorageSync('token'),
				betsNum: 0,
				isAgreement: true,
				thumb_status: 1,
				bet_type: '',
				bet_name: '双色球',
				type:'',
				pageTitle:'',
				smallTitle:''
			};
		},
		onLoad(option) {
			this.cartList = JSON.parse(option.cartList)
			console.log(this.cartList)
			this.fnCountBetsNum()
			console.log(option)
			this.pageTitle = option.pageTitle
			this.smallTitle = option.smallTitle
			if(option.type){
				this.type = option.type
				this.bet_name = '大乐透'
				this.bet_type = 3
			}else{
				this.bet_type = 2
			}
		},
		methods: {
			// 返回查看
			fnBackSee(item,index) {
				console.log(index)
				var obj = {
					item:item,
					index:index
				}
				uni.$emit('updateData', obj)
				uni.navigateBack()
			},
			// 删除单个
			fnDeleteSingle(idx) {
				this.cartList.forEach((item, index) => {
					if (index == idx) {
						this.cartList.splice(index, 1)
						if (this.cartList == 0) {
							uni.$emit('empty',true)
							uni.redirectTo({
								url: `/pages/caipiaoDetail/caipiaoDetail?type_id=${this.bet_type}`
							})
						}
					}
				})
			},
			// 改变倍数
			fnChangeMultiple(type) {
				if (type) { //加
					this.number++
				} else {
					if (this.number <= 1) return
					this.number--
				}
			},
			handleInput() {
				if (this.number <= 0 || '') {
					this.number = 1
				}
			},
			// 清除全部
			fnClearCart() {
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '确认清空全部方案？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.cartList = []
							uni.redirectTo({
								url: `/pages/caipiaoDetail/caipiaoDetail?type_id=${that.bet_type}`
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 重新选号
			fnRechoose() {
				this.fnGoBack()
			},
			fnGoBack() {
				uni.navigateBack()
			},
			// 单买
			fnSingleBuy() {
				this.$refs.popupPayment.open()
			},
			close() {
				this.$refs.popupPayment.close()
			},
			fnIsUploadImg() {
				if (this.isUploadImg) {
					this.thumb_status = 0
				} else {
					this.thumb_status = 1
				}
				this.isUploadImg = !this.isUploadImg
			},
			// 计算注数
			fnCountBetsNum() {
				this.cartList.forEach((item, index) => {
					this.betsNum += item.num
				})
			},
			fnCreateDoubleColorOrder() {
				console.log(this.number * 2 * this.betsNum)
				if (!this.isAgreement) return uni.showToast({
					title: '请先勾选协议',
					icon: 'none'
				})
				var url = '/czb/doublecolor_bet/createDoubleColorOrder'
				if(this.type){
					url = '/czb/bighappy_bet/createBigHappyOrder'
				}
				this.request({
					url: url,
					method: 'POST',
					data: {
						'token': this.token,
						'bet_data': this.cartList,
						'multiple': this.number,
						'store_id': 1,
						'thumb_status': this.thumb_status,
						'bet_type': this.bet_type,
						'total_price': this.number * 2 * this.betsNum
					},
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) {
						var data = ret.data
						uni.navigateTo({
							url: `/pages/bets/betsResult?order_id=${data.order_id}&type_id=${this.bet_type}`
						})
					} else {
						uni.showToast({
							title: ret.message,
							icon: 'none'
						})
					}
				})
			},
			fnToStatement() {
				uni.navigateTo({
					url: '/pages/packageA/statement/statement'
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.payBox {
		background: #F7F8FC;
		border-radius: 20rpx 20rpx 0 0;
		font-size: 30rpx;

		.payHead {
			.payTitle {
				padding: 0 20rpx;
				position: relative;
				height: 88rpx;
				margin-bottom: 2rpx;
				background: #fff;
				border-radius: 20rpx 20rpx 0 0;

				.icon {
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.payType {
				background: #fff;
				padding: 0 20rpx;
				height: 88rpx;
				margin-bottom: 20rpx;
			}
		}

		.payMain {
			padding: 0 20rpx;
			background: #fff;
			padding-bottom: 20rpx;

			.confirm {
				.agreement {
					font-size: 24rpx;

					image {
						width: 26rpx;
						height: 26rpx;
						padding: 10rpx;
					}
				}

				.comPayBtn {
					margin: 20rpx 0;
					height: 100rpx;
					background: #F22F29;
					border-radius: 10rpx;
					color: #fff;
				}
			}

			.redbag,
			.balance {
				height: 88rpx;
			}

			.redbag {
				border-bottom: 1rpx solid #F7F8FC;

				.gray {
					color: #666;
				}
			}
		}

		.red {
			color: #F22F29;
		}
	}

	.header {
		width: 100%;
		/*  #ifdef  H5  */
		height: 88rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		height: 150rpx;
		/*  #endif  */
		background: #F22F29;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		align-items: center;

		.status-bar {
			height: var(--status-bar-height);
		}

		.title {
			width: 100%;
			font-size: 32rpx;
			color: #fff;
			height: 100%;
			padding-top: var(--status-bar-height);
			box-sizing: border-box;

			view {
				flex: 1;
				padding: 0 10rpx;
				height: 100%;
				box-sizing: border-box;
				align-items: center;

				.pageTitle {
					margin-right: 15rpx;
					white-space: nowrap;
				}
			}

			.doubleColor {
				flex-direction: column;
				font-size: 32rpx;

				.smallTitle {
					font-size: 24rpx;
				}
			}

			.share {
				justify-content: flex-end;

				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin-right: 20rpx;
				}

				.select {
					padding: 20rpx;
				}
			}
		}
	}

	.holder {
		/*  #ifdef  H5  */
		height: 88rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		height: 150rpx;
		/*  #endif  */
	}

	.listBox {
		.list {
			.item {
				min-height: 150rpx;
				background: #FFFFFF;
				padding: 20rpx;
				margin-bottom: 1rpx;

				.info {
					font-size: 30rpx;
					align-items: center;
					flex: 1;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 25rpx;
					}

					.content {
						flex: 1;

						.numbers {
							flex: 1;
							flex-wrap: wrap;
							align-items: center;

							view {
								view {
									padding-right: 16rpx;
									font-weight: 500;
									color: #fc6655;
									font-family: DIN;
								}
							}
							.red{
								flex-wrap: wrap;
							}
							.blue {
								flex-wrap: wrap;

								view {
									color: #5CA1FC;
								}
							}
						}

						.desc {
							color: #666;
							font-size: 22rpx;
							margin-top: 10rpx;

							text {
								margin-right: 10rpx;
							}
						}
					}

				}
			}
		}

		.btns {
			padding: 32rpx 20rpx;
			background: #fff;

			.btn {
				width: 183rpx;
				height: 58rpx;
				border: 2rpx solid #ccc;
				border-radius: 10rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				color: #999;
			}

			.continue {
				color: #F22F29;
				border: 2rpx solid #F22F29;
			}
		}

	}

	.upload {
		margin: 28rpx 0;
		font-size: 24rpx;
		color: #666;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.other {
		background: #fff;
		padding: 0 20rpx;
		color: #333;
		font-size: 28rpx;
		margin-bottom: 40rpx;

		view {
			height: 120rpx;
			border-bottom: 1rpx solid #F7F8FC;
		}

		.multi {
			view {
				border: 1rpx solid #E3E3E3;
				height: 50%;
				width: 220rpx;
				border-radius: 10rpx;

				text {
					color: #999;
					flex: 1;
					text-align: center;
					font-size: 40rpx;
					background: #f5f5f5;
					height: 100%;
				}

				input {
					border-right: 1rpx solid #E3E3E3;
					border-left: 1rpx solid #E3E3E3;
					flex: 1;
					font-size: 26rpx;
					padding: 0 10rpx;
					box-sizing: border-box;
					height: 100%;
					text-align: center;
				}
			}
		}

		.addStage {
			.warmming {
				height: 60rpx;
				background: #F22F29;
				color: #fff;
				line-height: 60rpx;
				border-radius: 10rpx;
				padding: 0 20rpx;
			}

			.arrow {
				display: block;
				width: 0;
				height: 0;
				overflow: hidden;
				line-height: 0;
				font-size: 0;
				vertical-align: middle;
				border-left: 10rpx solid #F22F29;
				border-right: 0 none;
				border-top: 10rpx solid transparent;
				border-bottom: 10rpx solid transparent;
			}
		}
	}

	.holder1 {
		height: 136rpx;
	}

	.foot {
		position: fixed;
		padding: 0 20rpx;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		height: 136rpx;
		background: #1C0403;
		width: 100%;
		color: #fff;

		.oper {
			flex: 1;
			font-size: 24rpx;
			color: #fff;

			.clear {
				padding: 0 20rpx;
				flex-direction: column;
				align-items: center;
			}

			.warmming {
				padding: 0 20rpx;

				.betsNum {
					flex-direction: column;
					align-items: flex-start;
				}
			}

			.addNum,
			.finish {
				width: 160rpx;
				height: 74rpx;
			}

			.finish {
				background: #F22F29;
				border-radius: 0px 37rpx 37rpx 0px;
				font-size: 28rpx;
				position: relative;

				.count {
					font-size: 20rpx;
					border-radius: 50%;
					border: 1rpx solid #fff;
					background: #F22F29;
					position: absolute;
					right: -4rpx;
					top: -10rpx;
					padding: 2rpx 8rpx;
					box-sizing: border-box;
				}
			}

			.addNum {
				background: #32353E;
				border-radius: 37rpx 0px 0px 37rpx;
				color: #ED555E;
				font-size: 32rpx;

				text {
					font-size: 28rpx;
				}
			}
		}
	}
</style>
